<!DOCTYPE html>
<html>
	<head>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<meta charset="UTF-8">
		<title>58图集</title>
		<link rel="stylesheet" href="__PUBLIC__/css/base.css" />
		<link rel="stylesheet" href="__PUBLIC__/css/swiper.min.css" />
		<link rel="stylesheet" href="__PUBLIC__/css/layer.css" />
		<link rel="stylesheet" href="__PUBLIC__/css/style.css" />
		<script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.2.min.js" ></script>
		<script type="text/javascript" src="__PUBLIC__/js/layer.js" ></script>
		<script type="text/javascript" src="__PUBLIC__/js/jaliswall.js" ></script>
		<script type="text/javascript" src="__PUBLIC__/js/swiper.min.js" ></script>
		<style type="text/css">
#header a.headerLogin{ left: 0px; background: url(__PUBLIC__/img/menu_icon.png) center center no-repeat; background-size: 24px auto;}
#header a.headerMenu{ right: 0px; background: url(__PUBLIC__/img/nav_icon.png) center center no-repeat; background-size: 24px auto;}
.atlasList .box.AnnouncementItem{ background: url(__PUBLIC__/img/title.png) center 10px no-repeat #ff8a21; background-size: 80% auto; position: relative; z-index: 10;}
.atlasList .box.AnnouncementItem .quotes_icon{ width: 10px; height: 10px; background: url(__PUBLIC__/img/Quotes.png) center center no-repeat; background-size: auto 100%; display: block; position: absolute; z-index: 20; top: 10px; left: 10px;}
.atlasList .box.NoticeItem dd{ padding: 8px; line-height: 18px; width: auto; margin: 0px; background: url(__PUBLIC__/img/notice.png) center 16px no-repeat; background-size: 60% auto; color: #333;}
.atlasList .box dt a{ width: 30px; height: 30px; display: block; background: url(__PUBLIC__/img/share_icon.png) right center no-repeat; background-size: 16px auto; text-indent: -9999px;}
.atlasList .box.AddalbumItem a{ padding: 0px; height: 120px; display: block; overflow: hidden; border: 1px dashed #C6C6C6; background: url(__PUBLIC__/img/add.png) center 32px no-repeat; background-size: 30px auto;}
.boxMenu li a.download_btn span{ background: url(__PUBLIC__/img/download_icon.png) left center no-repeat; background-size: auto 16px;}
.boxMenu li a.set_btn span{ background: url(__PUBLIC__/img/set_icon.png) left center no-repeat; background-size: auto 14px;}
#mask .colse_btn{width: 40px; height: 40px; display: block; position: absolute; top: 0px; left: 0px; z-index: 3000; background: url(__PUBLIC__/img/cancle_icon.png) center center no-repeat; background-size: 16px auto;}
.photoItemMask .layer-close-btn{ width: 24px; height: 24px; display: block; position: absolute; z-index: 4100; top: 8px; left: 8px; background: url(__PUBLIC__/img/close.png) no-repeat; background-size: 100% 100%;}
.photoItemMask .layer-share-btn{ width: 24px; height: 24px; display: block; position: absolute; z-index: 4100; top: 8px; right: 8px; background: url(__PUBLIC__/img/share_icon.png) no-repeat; background-size:auto 100%;}

		
		</style>
	</head>
	<body>
		<!--header-->
		<header id="header">
			<a href="javascript:$('#mask,.loginMask').show()" class="headerLogin"></a>
			<a href="javascript:$('#mask,.headerUserContent').show()" class="headerMenu"></a>
			<p>58集图</p>
		</header>
		<!--header end-->
		<!--content-->
		<div id="content">
			<!--banner-->
			<div class="banner">
		    	<img src="__PUBLIC__/img/banner.png" /> 
			</div>
			<!--banner end-->
			<!--list-->
			<div class="atlasList">
				<div class="atlasListOuter wall">
					<!--通告-->
					<div class="AnnouncementItem box">
						<span class="quotes_icon"></span>
						<p>{$homenotice}</p>
					</div>
					<!--通告 end-->
					<!--公告-->
					<div class="NoticeItem box">
						<dl>
							<volist name="noticelist" id="noticeitem">
									<dt>{$noticeitem[noticetitle]}</dt>
									<dd>{$noticeitem[noticemessage]}</dd>
							</volist>
						</dl>
					</div>
					<!--公告 end-->
					<!--添加相册-->
					<div class="AddalbumItem box">
						<a href="{:U('newalbum')}">
							
							<span>添加相册</span>
						</a>
					</div>
					<!--添加相册 end-->
					<!--添加分类-->
					<div class="AddalbumItem box">
						<a href="#">
							<span>添加分类</span>
						</a>
					</div>
					<!--添加分类 end-->
					<!--添加照片-->
					<div class="AddalbumItem box">
						<a href="#">
							<span>添加照片</span>
						</a>
					</div>
					<!--添加照片 end-->
					<!--data-id 为相册id-->
					<div class="box" id="box_1">
						<div class="box_item" data-id="1">
							<span class="img">
								<img src="__PUBLIC__/img/img.png" />
							</span>
							<dl>
								<dt>
									<span class="user_img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>张三李四1</p>
									<a href="javascript:reprint(1)">分享</a>
								</dt>
								<dd>不得不说苹果生态系统内，文件真是方便，而且快。iPhone与Mac间首先自然是AirDrop，速度快且无需联网。</dd>
							</dl>
						</div>
						<!--menu-->
						<div class="boxMenu">
							<ul>
								<li>
									<a href="#" class="download_btn">
										<span>下载</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)" onclick="manage(1)" class="set_btn">
										<span>管理</span>
									</a>
								</li>
							</ul>
						</div>
						<!--menu end-->
					</div>
					<div class="box" id="box_2">
						<div class="box_item" data-id="2">
							<span class="img">
								<img src="__PUBLIC__/img/img.png" />
							</span>
							<dl>
								<dt>
									<span class="user_img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>张三李四2</p>
									<a href="javascript:reprint(2)">分享</a>
								</dt>
								<dd>不得不说苹果生态系统内，文件真是方便，而且快。iPhone与Mac间首先自然是AirDrop，速度快且无需联网。</dd>
							</dl>
						</div>	
						<!--menu-->
						<div class="boxMenu">
							<ul>
								<li>
									<a href="#" class="download_btn">
										<span>下载</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)" onclick="manage(2)" class="set_btn">
										<span>管理</span>
									</a>
								</li>
							</ul>
						</div>
						<!--menu end-->
					</div>
					<div class="box" id="box_3">
						<div class="box_item" data-id="3">
							<span class="img">
								<img src="__PUBLIC__/img/img.png" />
							</span>
							<dl>
								<dt>
									<p>相册名相册名(18)</p>
									<a href="javascript:reprint(3)">分享</a>
								</dt>
								<dd>不得不说苹果生态系统内，文件真是方便，而且快。iPhone与Mac间首先自然是AirDrop，速度快且无需联网。</dd>
							</dl>
						</div>	
						<!--menu-->
						<div class="boxMenu">
							<ul>
								<li>
									<a href="#" class="download_btn">
										<span>下载</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)" onclick="manage(3)" class="set_btn">
										<span>管理</span>
									</a>
								</li>
							</ul>
						</div>
						<!--menu end-->
					</div>
					<div class="box" id="box_4">
						<div class="box_item" data-id="4">
							<span class="img">
								<img src="__PUBLIC__/img/img.png" />
							</span>
							<dl>
								<dt>
									<span class="user_img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>张三李四4</p>
									<a href="javascript:reprint(4)">分享</a>
								</dt>
								<dd>不得不说苹果生态系统内，文件真是方便，而且快。iPhone与Mac间首先自然是AirDrop，速度快且无需联网。</dd>
							</dl>
						</div>	
						<!--menu-->
						<div class="boxMenu">
							<ul>
								<li>
									<a href="#" class="download_btn">
										<span>下载</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)" onclick="manage(4)" class="set_btn">
										<span>管理</span>
									</a>
								</li>
							</ul>
						</div>
						<!--menu end-->
					</div>
					<div class="box" id="box_5" data-id = "5">
						<div class="box_item" data-id="5">
							<span class="img">
								<img src="__PUBLIC__/img/img.png" />
							</span>
							<dl>
								<dt>
									<span class="user_img">
										<img src="__PUBLIC__/img/img.png" />
									</span>
									<p>张三李四5</p>
									<a href="javascript:reprint(5)">分享</a>
								</dt>
								<dd>不得不说苹果生态系统内，文件真是方便，而且快。iPhone与Mac间首先自然是AirDrop，速度快且无需联网。</dd>
							</dl>
						</div>	
						<!--menu-->
						<div class="boxMenu">
							<ul>
								<li>
									<a href="#" class="download_btn">
										<span>下载</span>
									</a>
								</li>
								<li>
									<a href="javascript:void(0)" onclick="manage(5)" class="set_btn">
										<span>管理</span>
									</a>
								</li>
							</ul>
						</div>
						<!--menu end-->
					</div>
				</div>
			</div>
			<!--list end-->
		</div>
		<!--content end-->
		<!--msak-->
		<div id="mask">
			<!--未登录框-->
			<div class="loginMask maskMain">
				<ul>
					<li>
						<a href="javascript:$('#mask,.maskMain').hide();$('#loginmodal').show()" class="login_btn">登录</a>
					</li>
					<li>
						<a href="javascript:$('#mask,.maskMain').hide();$('#zhucemodal').show()" class="register_btn">注册</a>
					</li>
				</ul>
				<span class="colse_btn" onclick="javascript:$('#mask,.maskMain').hide()"></span>
			</div>
			<!--未登录框 end-->
			<!--已登录框-->
			<div class="loginUserMask maskMain">
				<span class="colse_btn" onclick="javascript:$('#mask,.maskMain').hide()"></span>
				<dl>
					<dt>
						<span class="user_img">
							<img src="__PUBLIC__/img/img.png" />
						</span>
					</dt>
					<dd>张三李四</dd>
				</dl>
				<ul>
					<li>
						<a href="#">
							<p>
								<span class="icon">
									<img src="__PUBLIC__/img/icon.png" />
								</span>
								<em>58集图</em>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<p>
								<span class="icon">
									<img src="__PUBLIC__/img/icon1.png" />
								</span>
								<em>我的主页</em>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<p>
								<span class="icon">
									<img src="__PUBLIC__/img/icon2.png" />
								</span>
								<em>帐号管理</em>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<p onclick="javascript:$('#mask,.maskMain').hide()">
								<span class="icon">
									<img src="__PUBLIC__/img/icon3.png" />
								</span>
								<em>退出登录</em>
							</p>
						</a>
					</li>
				</ul>
			</div>
			<!--已登录框 end-->

			<!--个人中心-->
			<div class="headerUserContent maskMain">
				<span class="colse_btn" onclick="javascript:$('#mask,.headerUserContent').hide()"></span>
				<dl>
					<dt>
						<span>个人中心</span></dt>
					<dd>
						<a href="{:U('Mobile/Index/usercenter')}&types=1"><span>用户中心</span></a>
					</dd>
					<dd>
						<a href="{:U('Mobile/Index/usercenter')}&types=2"><span>相册服务</span></a>
					</dd>
					<dd>
						<a href="{:U('Mobile/Index/usercenter')}&types=3"><span>装修相册</span></a>
					</dd>
					<dd>
						<a href="{:U('Mobile/Index/usercenter')}&types=4"><span>用户设置</span></a>
					</dd>
					<dd>
						<a href="{:U('Mobile/Index/usercenter')}&types=5"><span>VIP服务</span></a>
					</dd>
				</dl>
			</div>
			<!--个人中心 end-->
			<!--管理-->
			<div class="manageMask maskMain">
				<ul>
					<li>
						<a href="#" class="changeNameBtn">更改名称</a>
					</li>
					<li>
						<a href="javascript:void(0)" onclick="delItemBtn(this)" class="delBtn">删除</a>
					</li>
				</ul>
				<a href="javascript:$('#mask,.headerUserContent').hide()" class="cancelBtn">取消</a>
			</div>
			<!--管理 end-->
			<!--相册-->
			<div class="photoItemMask maskMain" data-id = "12">
				<a href="javascript:void(0)" class="layer-close-btn" onclick="javascript:$('#mask,.maskMain').hide()"></a>
				<a href="javascript:reprint(12)" class="layer-share-btn"></a>
				<div class="swiper-container">
			  		<div class="swiper-wrapper">
			    		<div class="swiper-slide">
			    			<img src="__PUBLIC__/img/img.png" />
			    		</div>
			    		<div class="swiper-slide">
			    			<img src="__PUBLIC__/img/img.png" />
			    		</div>
			    		<div class="swiper-slide">
			    			<img src="__PUBLIC__/img/img.png" />
			    		</div>
			  		</div>
				</div>
				<div class="photoItemMaskCont">
					<p>坚持“以客户为中心”的理念，秉承“天天低价，正品行货”信念.提供该页面的具体描述。</p>
				</div>
				<div class="photoItemMaskFoot">
					<nav>
						<a href="javascript:void(0)" class="swiper-button-prev">上一张</a>
						<a href="javascript:void(0)" class="swiper-button-next">下一张</a>
					</nav>
				</div>
			</div>
			<!--相册 end-->
		</div>
		<!--msak end-->
			<!-- 登陆弹框 -->
			<div id="loginmodal" style="display:none">
<div id="loginModal" class="modal show" >
  <div class="modal-dialog">
    <div class="modal-content" style="margin-top:30%;border-radius:0px;">
      <div class="modal-header">
        <button type="button" class="close" onclick="javascript:$('#loginmodal').hide(); $('#mask,.maskMain').hide();">x</button>
        <h1 class="text-center">登录</h1>
      </div>
      <div class="modal-body">
        <form action="" class="form col-md-12 center-block">
          <div class="form-group">
            <input type="text" class="form-control input-lg" placeholder="电话号码或邮箱" style="border-radius:0px;">
          </div>
          <div class="form-group">
            <input type="password" class="form-control input-lg" placeholder="登录密码" style="border-radius:0px;">
          </div>
          <div class="form-group">
            <button class="btn btn-lg btn-block" onclick="javascript:$('#mask,.loginUserMask').show()" style="background-color:#ff8a21">立刻登录</button>
            <span style="display:block;margin-top:10px;"><a href="#">忘记密码</a></span>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        
      </div>
    </div>
  </div>
</div>
</div>
<style type="text/css">
@import url('http://cdn.gbtags.com/twitter-bootstrap/3.2.0/css/bootstrap.css');
body{
 font-family: 'microsoft yahei',Arial,sans-serif;
 margin:0;
 padding:0;
}
</style>
<!-- 登陆弹框结束 -->


			<!-- 注册弹框 -->
<div id="zhucemodal" style="display:none">
<div id="zhuceModal" class="modal show" >
  <div class="modal-dialog">
    <div class="modal-content" style="margin-top:30%;border-radius:0px;">
      <div class="modal-header">
        <button type="button" class="close" onclick="javascript:$('#zhucemodal').hide(); $('#mask,.maskMain').hide();">x</button>
        <h1 class="text-center">账号注册</h1>
      </div>
      <div class="modal-body">
        <form action="" class="form col-md-12 center-block">
          <div class="form-group">
            <input type="text" class="form-control input-lg" placeholder="注册名" style="border-radius:0px;">
          </div>	
          <div class="form-group">
            <input type="text" class="form-control input-lg" placeholder="注册号码" style="border-radius:0px;">
          </div>
          <div class="form-group">
            <input type="text" class="form-control input-lg" placeholder="注册邮箱" style="border-radius:0px;">
          </div>
          <div class="form-group">
            <input type="password" class="form-control input-lg" placeholder="注册密码" style="border-radius:0px;">
          </div>
          <div class="form-group">
            <button class="btn btn-lg btn-block" onclick="javascript:$('#mask,.zhuceUserMask').show()" style="background-color:#ff8a21">立刻注册</button>
            <span style="display:block;margin-top:10px;"><a href="#">忘记密码</a></span>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        
      </div>
    </div>
  </div>
</div>
</div>
<!-- 注册弹框结束 -->
	</body>
	<script>
		$('.wall').jaliswall({ item: '.box' });
		$(function(){
			$("#mask").click(function(e){
			  	var _con = $('.maskMain');   // 设置目标区域
			 	 if(!_con.is(e.target) && _con.has(e.target).length === 0){
			      $('#mask,.maskMain').hide();
			  	}
			});
			
	        $(".box .img").click(function(){
	        	var id = $(this).parents(".box").find(".box_item").attr("data-id");
	        	$("#mask").show();
	        	$(".photoItemMask").attr("data-id",id).show();
	        	mySwiper.slideTo(0, 100, false);//切换到第一个slide，速度为1秒
	        });
	        var mySwiper = new Swiper('.swiper-container', {
					prevButton:'.swiper-button-prev',
					nextButton:'.swiper-button-next',
		            observer: true,//修改swiper自己或子元素时，自动初始化swiper
		            observeParents: true,//修改swiper的父元素时，自动初始化swiper
		        });
		});
		
		//管理弹出框
		function manage(id){
			$('#mask,.manageMask').show();
			$(".manageMask").attr("data-id",id);
		}
		//删除
		function delItemBtn(obj){
			var id = $(obj).parents(".manageMask").attr("data-id");
			layer.confirm('确认删除该相册？', {
				title:0,
			  	btn: ['确认','取消'] //按钮
			}, function(){
			  	//确认
			  	$("#box_"+id).remove();
			  	window.location.reload();
			});
		}
		//转载
		function reprint(id){
			console.log(id)
			layer.prompt({title: '请输入密码转载', formType: 1}, function(pass, index){
			    layer.close(index);
			    layer.msg('你输入的密码是：'+ pass );
			});
		}
	</script>
</html>	